<?php
$pageTitle = "首页";
$currentPage = "search";
include('./headers.php');
include('./db/conn.php');

// 初始化一个空数组来存储课程数据
$courses = [];
$search_value = "";
$user_id = $_COOKIE['user_id'];
$get_stu_id = "SELECT stu_id FROM student WHERE user_id = '$user_id'";
$stu_id_result = mysqli_query($conn, $get_stu_id);
$student_id = mysqli_fetch_assoc($stu_id_result)['stu_id'];

// 分页设置
$items_per_page = 5; // 每页显示的课程数量
$current_page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($current_page - 1) * $items_per_page;

// 处理搜索表单提交
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_POST['search'])) {
        $search_value = mysqli_real_escape_string($conn, $_POST['search_value']);
        $sql = "SELECT c.course_id, c.course_name, c.course_intro, c.img_url, c.download_url, c.start_time, t.name, t.src 
                FROM course c
                JOIN teacher t ON c.teacher_id = t.teacher_id
                WHERE c.course_name LIKE '%$search_value%' 
                OR t.name LIKE '%$search_value%' 
                OR c.course_intro LIKE '%$search_value%' 
                OR c.course_id LIKE '%$search_value%' 
                OR c.teacher_id LIKE '%$search_value%'
                LIMIT $offset, $items_per_page";
        $count_sql = "SELECT COUNT(*) as total 
                      FROM course c
                      JOIN teacher t ON c.teacher_id = t.teacher_id
                      WHERE c.course_name LIKE '%$search_value%' 
                      OR t.name LIKE '%$search_value%' 
                      OR c.course_intro LIKE '%$search_value%' 
                      OR c.course_id LIKE '%$search_value%' 
                      OR c.teacher_id LIKE '%$search_value%'";
    } elseif (isset($_POST['cancel'])) {
        $sql = "SELECT c.course_id, c.course_name, c.course_intro, c.img_url, c.download_url, c.start_time, t.name, t.src 
                FROM course c
                JOIN teacher t ON c.teacher_id = t.teacher_id
                LIMIT $offset, $items_per_page";
        $count_sql = "SELECT COUNT(*) as total FROM course";
    }
} elseif (isset($_GET['view']) && $_GET['view'] == 'my_courses') {
    // 获取学生已加入的课程
    $sql = "SELECT c.course_id, c.course_name, c.course_intro, c.img_url, c.download_url, c.start_time, t.name, t.src 
            FROM course c
            JOIN teacher t ON c.teacher_id = t.teacher_id
            JOIN learn l ON c.course_id = l.course_id
            WHERE l.stu_id = '$student_id'
            LIMIT $offset, $items_per_page";
    $count_sql = "SELECT COUNT(*) as total 
                  FROM course c
                  JOIN teacher t ON c.teacher_id = t.teacher_id
                  JOIN learn l ON c.course_id = l.course_id
                  WHERE l.stu_id = '$student_id'";
} else {
    // 从数据库中获取课程数据
    $sql = "SELECT c.course_id, c.course_name, c.course_intro, c.img_url, c.download_url, c.start_time, t.name, t.src 
            FROM course c
            JOIN teacher t ON c.teacher_id = t.teacher_id
            LIMIT $offset, $items_per_page";
    $count_sql = "SELECT COUNT(*) as total FROM course";
}

// 获取总课程数量
$count_result = mysqli_query($conn, $count_sql);
$total_items = mysqli_fetch_assoc($count_result)['total'];
$total_pages = ceil($total_items / $items_per_page);

// 获取课程数据
$result = mysqli_query($conn, $sql);

// 循环遍历获取的结果并将它们存储在数组中
while ($row = mysqli_fetch_assoc($result)) {
    // 检查用户是否已报名该课程
    $course_id = $row['course_id'];
    $is_enrolled = false;
    $check_enrollment = "SELECT 1 FROM learn WHERE stu_id = '$student_id' AND course_id = '$course_id'";
    $enrollment_result = mysqli_query($conn, $check_enrollment);
    if (mysqli_num_rows($enrollment_result) > 0) {
        $is_enrolled = true;
    }

    $row['is_enrolled'] = $is_enrolled; // 将是否已报名的状态存储在课程数据中
    $courses[] = $row;
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/header.css">
</head>

<body>
    <div class="container">
        <div class="main">
            <!-- 内容 -->
            <div class="content">
                <div class="search-container">
                    <form method="post" action="">
                        <input type="text" class="search-input" name="search_value" value="<?php echo htmlspecialchars($search_value); ?>" placeholder="请输入您要搜索的内容...">
                        <button type="submit" class="search-button" name="search">搜索</button>
                        <?php if ($search_value != "") : ?>
                            <button type="submit" class="search-button" name="cancel">取消</button>
                        <?php endif; ?>
                    </form>
                </div>

                <?php if ($search_value != "") : ?>
                    <p>搜索内容: "<?php echo htmlspecialchars($search_value); ?>"</p>
                <?php endif; ?>

                <div class="bar">
                    <div class="left_bar">
                        <ul>
                            <li data-target="?">搜索课程</li>
                            <li data-target="?view=my_courses">我的课程</li>
                        </ul>
                    </div>
                    <div class="right_bar">
                        <div class="card_container">
                            <?php if (isset($courses) && !empty($courses)) { // 检查 $courses 数组是否存在且不为空
                                foreach ($courses as $course) : ?>
                                    <a href="<?php echo $course['is_enrolled'] ? 'index.php?course_id=' . $course['course_id'] : 'introduce.php?course_id=' . $course['course_id']; ?>" class="hover-card">
                                        <div class="card_1">
                                            <span class="c_name"><?php echo $course['course_name']; ?></span>
                                            <div class="button1">
                                                进入课程
                                            </div>
                                        </div>
                                        <div class="card_2">
                                            <div class="t_inf">
                                                <img src="<?php echo $course['src']; ?>" alt="avatar">
                                                <span><?php echo $course['name']; ?></span>
                                            </div>
                                            <div class="time">
                                                <span>
                                                    开课时间：<?php echo date('Y年m月d日', strtotime($course['start_time'])); ?>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                <?php endforeach;
                            } else { ?>
                                <p>未找到相关课程。</p>
                            <?php } ?>

                        </div>

                        <!-- 分页链接 -->
                        <div class="pagination">
                            <?php if ($current_page > 1) : ?>
                                <a href="?page=<?php echo $current_page - 1; ?>">上一页</a>
                            <?php endif; ?>

                            <?php for ($i = 1; $i <= $total_pages; $i++) : ?>
                                <?php if ($i == $current_page) : ?>
                                    <span><?php echo $i; ?></span>
                                <?php else : ?>
                                    <a href="?page=<?php echo $i; ?>"><?php echo $i; ?></a>
                                <?php endif; ?>
                            <?php endfor; ?>

                            <?php if ($current_page < $total_pages) : ?>
                                <a href="?page=<?php echo $current_page + 1; ?>">下一页</a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    // 为左侧导航栏的li元素添加点击事件
    document.querySelectorAll('.left_bar li').forEach(function(element) {
        element.addEventListener('click', function() {
            window.location.href = element.getAttribute('data-target');
        });
    });
</script>

</html>



<style lang="scss" scoped>
    .hover-card {
        display: block;
        text-decoration: none;
        color: inherit;
        /* 继承父元素的字体颜色 */
    }

    .card_1,
    .card_2 {
        /* 保证卡片内部元素不会影响布局 */
        pointer-events: none;
        /* 禁止子元素触发点击事件 */
    }

    .card_1 .button1 {
        /* 确保 button1 的内容始终显示 */
        display: inline-block;
    }

    .main {
        display: flex;
        margin-left: 10vh;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .search-container {
        display: flex;

        .search-input {
            border: 0;
            border-bottom: 1px solid #000000;
            height: 30px;
            outline: none;
            background-color: transparent;
            width: 20vw;
        }

        .search-button {
            margin-left: 30px;
            background: none;
            /* 去除背景 */
            cursor: pointer;
            /* 设置鼠标指针 */
            font-size: 14px;
            /* 设置字体大小 */
            width: 60px;
            height: 30px;
        }
    }

    .bar {
        display: flex;
        flex-direction: row;
    }

    .left_bar {
        display: flex;
        flex-direction: column;
        width: 20vw;
        background-color: #ffffff;
        border-radius: 12px;
        height: 13vh;
    }

    .left_bar ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .left_bar li {
        padding: 10px;
        /* 添加一些内边距以提高可读性 */
        height: 24px;
        line-height: 24px;
        margin-top: 10px;
        border-bottom: 1px solid #e0e0e0;
        /* 为每个列表项底部添加边框以分隔它们 */
        font-family: Arial, sans-serif;
        font-size: 16px;
    }

    .left_bar li:last-child {
        border-bottom: none;
    }

    .card_container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* 允许子元素换行 */
        max-width: 60vw;
        padding: 10px;
        gap: 20px;
        /* 创建子元素之间的间隙，替代margin-left */
    }

    /* 卡片 */
    .hover-card {
        position: relative;
        width: 23vw;
        height: 13vh;
        /* 移除margin-left */
        padding: 20px;
        padding-bottom: 40px;
        background-color: #fff;
        border: 1px solid #ebeef5;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        font-family: Arial, sans-serif;
        transition: box-shadow 0.3s ease;
    }

    .c_name {
        font-size: 22px;
        font-weight: 550;
    }

    .button1 {
        border: 0;
        float: right;
        color: #fff;
        height: 30px;
        width: 80px;
        background-color: rgb(104, 108, 227);
        border-radius: 5px;
    }

    .card_2 {
        display: flex;
        flex-direction: row;
        position: absolute;
        bottom: 10px;
        left: 20px;

        .t_inf {
            display: flex;
            align-items: center;

            img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 10px;
            }

            span {
                font-size: 16px;
            }
        }

        .time {
            font-size: 14px;
            margin-top: 5px;
            margin-left: 10px;
            /* 修改为适合你的布局的值 */
        }
    }

    .header {
        display: flex;
        flex-direction: row;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #FFFFFF;
        height: 64px;
        align-items: center;

        .item {
            display: flex;
            margin-left: 20px;
            line-height: 64px;
            align-items: center;

            span {
                font-size: 16px;
                color: #333333;
                margin-left: 20px;
                margin-left: 3vw;
                font-weight: bold;
            }
        }

        .plat_name {
            font-size: 24px;
            color: #333333;
            margin-left: 20px;
            font-weight: bold;
            margin-left: 10vw;
        }

        .personality {
            margin-left: 25vw;
            font-size: 16px;
        }

        .avatar {
            margin-top: 30px;
            margin-left: 30px;
            width: 50px;
            height: 50px;
            border-radius: 100%;
        }
    }

    .hover-card:hover {
        box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .pagination a,
    .pagination span {
        margin: 0 5px;
        padding: 5px 10px;
        border: 1px solid #ccc;
        color: #333;
        text-decoration: none;
    }

    .pagination a:hover {
        background-color: #f0f0f0;
    }

    .pagination span {
        background-color: #ddd;
    }
</style>


</html>